<template>
  <div class="teaching-management-edit addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>教务管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/education/teachingManagement/list' }">授课信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加授课</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <section>
        <el-row class="mt20 border p20">
          <el-col :span="12">
            <el-form ref="form" :hide-require-asterisk="true" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="选择班级:" prop="class">
                <el-select v-model="form.class" filterable remote :remote-method="getTeacherList" style="width:230px" placeholder="请选择班级名称">
                  <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择科目:" prop="subject">
                <el-select v-model="form.subject" filterable remote :remote-method="getTeacherList" style="width:230px" placeholder="请选择班级名称">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择老师:" prop="teachUser">
                <el-select v-model="form.teachUser" filterable remote :remote-method="getTeacherList" style="width:230px" placeholder="请选择班级名称">
                  <el-option
                    v-for="item in teacherList"
                    :key="item.id"
                    :label="item.user_name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button size="small" style="background:#fb9654;color:#fff;border:none;" :disabled="isDisabled"
                           @click="onSubmit">保存
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </section>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      form: {
        id:"", //id
        class: "", //班级id
        subject: "", //科目id
        teachUser: "" //教师id
      },
      teacherList:[],
      classList: [],// 班级列表
      subjectList: [],// 科目列表
      rules: {
        class: [
          { required: true, trigger: "change", message: "不能为空", }
        ],
        subject: [
          { required: true, trigger: "change", message: "不能为空", }
        ],
        teachUser: [
          { required: true, trigger: "change", message: "不能为空", }
        ]
      },
      isDisabled:false,

    };
  },
  mounted() {
    this.form.id = Number(this.$route.query.id);
    this.form.class = Number(this.$route.query.class);
    this.form.subject = Number(this.$route.query.subject);
    this.form.teachUser = Number(this.$route.query.teachUser);
    this.getClassList();
    this.getSubjectList();
    this.getTeacherList();
  },
  methods: {
    getTeacherList() {
      this.$api.education.classTeacherList({
        pageNum: 1,
        pageSize: 100,
      })
        .then((res) => {
          this.teacherList = res.data;
        });
    },
    getSubjectList(){
      this.$api.education.subjectList({
        pageNum:1,
        pageSize:100
      }).then((res)=>{
        if(res.code===200){
          console.log(res);
          this.subjectList = res.data.list;
        }
      })
    },
    getClassList(){
      let params = {
        pageNum: 1,
        pageSize: 100,
        name: ""
      };
      this.$api.education.classList(params)
        .then((res) => {
          if (res.code === 200) {
            this.classList = res.data.list;
          }
        });
    },
    //提交添加的数据
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isDisabled = true
          let params = {
            id:this.form.id,
            class: this.form.class, //班级id
            subject: this.form.subject, //科目id
            teachUser: this.form.teachUser, //教师id
            course: ""
          }
          this.$api.education.teachCourseUpdate(params)
            .then((res)=>{
              this.$message.success("修改成功");
              this.$refs["form"].resetFields();
              this.$router.replace("/education/teachingManagement/list")
              this.isDisabled =false;
            }).catch((err)=>{
            this.isDisabled =false;
          })
        }
      });
    },
  },

};
</script>
<style>
@import url("./edit.css");
</style>
<style>
.p20 {
  padding: 20px 20px 0;
}
</style>
